import React from 'react'
import ReactDOm from 'react-dom'

// 引入css
import './css/index.css'

const name = '叶树森'
const age = 26
const isLoading = true

// JSX语法
const title = (
  <h1 className='title' style={{ color: 'pink', background: 'red' }}>
    <span style={{ fontSize: '80px' }} />
    hello JSX{name},年龄{age}
  </h1>
)
// if-else
// const loadData = () => {
//   if (isLoading) {
//     return <div>loading</div>
//   }
//   return <div>数据加载完毕</div>
// }

//三元表达式
// const loadData = () => {
//   return isLoading ?(<div>isLoading。。。</div>):(<div>数据加载完毕</div>)
// }

//逻辑与运算符
const loadData = () => {
  return isLoading && <div>加载中</div>
}

const content = <h1>条件渲染：{loadData()}</h1>
// jsx使用JavaScript表达式
//渲染react元素
ReactDOm.render(title, document.getElementById('root'))
// ReactDOm.render(title,document.getElementById("body"))

ReactDOm.render(content, document.getElementById('body'))
